<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增场次配置')" />
</head>
<body class="white-bg">
	<div class="wrapper wrapper-content animated fadeInRight ibox-content">
		<form class="form-horizontal m" id="form-config-add">
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">配置名称：</label>
				<div class="col-sm-8">
					<input id="configName" name="configName" class="form-control" type="text" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">题目数量：</label>
				<div class="col-sm-8">
					<input id="questionCount" name="questionCount" class="form-control" type="number" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">题目分类：</label>
				<div class="col-sm-8">
					<select id="categoryId" name="categoryId" class="form-control">
						<option value="0">全部分类</option>
						<!-- 这里应该通过AJAX加载分类数据 -->
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">难度筛选：</label>
				<div class="col-sm-8">
					<select id="difficulty" name="difficulty" class="form-control">
						<option value="0">全部</option>
						<option value="1">简单</option>
						<option value="2">中等</option>
						<option value="3">困难</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">考试类型：</label>
				<div class="col-sm-8">
					<select id="examType" name="examType" class="form-control" required>
						<option value="1">单人答题</option>
						<option value="2">PK答题</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">考试时长：</label>
				<div class="col-sm-8">
					<input id="examDuration" name="examDuration" class="form-control" type="number" value="3600" required>
					<span class="help-block">单位：秒</span>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label is-required">状态：</label>
				<div class="col-sm-8">
					<select id="status" name="status" class="form-control" required>
						<option value="1">启用</option>
						<option value="0">禁用</option>
					</select>
				</div>
			</div>
		</form>
	</div>
	<th:block th:include="include :: footer" />
	<script type="text/javascript">
		var prefix = ctx + "system/exam/config";
		
		$(function() {
			// 初始化表单
			$("#form-config-add").validate({
				focusCleanup: true
			});
			
			// 加载题目分类数据
			loadCategoryData();
		});
		
		// 加载题目分类数据
		function loadCategoryData() {
			$.ajax({
				url: ctx + "system/question/category/list",
				type: "post",
				dataType: "json",
				success: function(result) {
					if (result.code == 0) {
						var options = '<option value="0">全部分类</option>';
						for (var i = 0; i < result.rows.length; i++) {
							var category = result.rows[i];
							options += '<option value="' + category.id + '">' + category.categoryName + '</option>';
						}
						$("#categoryId").html(options);
					}
				}
			});
		}
		
		// 表单提交
		function submitHandler() {
			if ($.validate.form()) {
				$.operate.save(prefix + "/add", $('#form-config-add').serialize());
			}
		}
	</script>
</body>
</html>